iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
3
Modern Web

重新認識 Flex 和 Grid系列 第 2

[Day02] 你知道什麼是 W3C 嗎?

  • 分享至 

  • xImage
  •  

「你說說,為什麼我只是要排個版還要知道 W3C?」

恩 . . .不好奇一下你寫的東西是怎麼來的嗎?寫的東西是誰訂的?為什麼寫了就能動?如果不去追究這些,也不會怎樣啦,反正寫出來能動就好了嘛 XD(喂!不許你胡說!)

相信對 W3C 有初步認識後,對於 CSS 的發展會有更多的了解和幫助,知道更多關於 CSS 的事情,相對的 CSS 相關知識掌握度會更高。

W3C 是什麼?他們的目的是?

W3C:全球資訊網協會(World Wide Web Consortium),又稱 W3C 理事會,由 Tim Berners-Lee 成立於 1994,是全球資訊網路的主要國際標準組織之一,以開放論壇 https://www.w3.org/ 的方式來促進開發互通技術,目的在使全球資訊網技術標準化,促進業界成員間的相容性,規範的標準囊括 HTML、CSS、DOM、SVG、XML 等。

想想看你開心寫的網站,在 Chrome 上長得像蒙娜麗莎,在 IE 卻長得像吶喊,情何以堪啊!還要再查各家瀏覽器的標準再寫好幾版好麻煩!然而 W3C 的標準並非強制,只是做推薦規範,因此才會有瀏覽器未支援某功能的問題存在;不過現在會出現支援問題的可能性減少很多,通常只會出現在新功能或實驗性功能,大家都還算遵守規範(吧?IE?

W3C 標準規範的制定流程

如果你會聽英文,先看這個比較快理解,裡面也有圖解:
The CSS of the Future: The Standardization Process

CSS 有自己的工作團隊,又稱為 CSSWG(Cascading Style Sheets working group),工作團隊的組成通常是瀏覽器廠商、主流網站、大學、CSS專家、研究機構和技術公司等成員,可以去他們的網站看看他們目前在做些什麼:Cascading Style Sheets
home page

W3C 標準制定流程圖片參考

https://ithelp.ithome.com.tw/upload/images/20200916/20128346CDaV329YtX.png

英文小幫手:
WG:Working Group 工作團隊
AC:Advisory Committee 顧問委員會 / W3C的委員、顧問

圖片來源:6.2. The W3C Recommendation Track

流程 1:編輯草案 ED(Editor’s Draft)

規範的開始階段,工作團隊會指定一個新的 CSS 屬性或選擇器的想法,並且在 CSSWG 內部進行討論及研究。如果工作團隊及會員同意將其發佈,將進入工作草案。

流程 2:工作草案 FPWD(First Public Working Draft)

其實就是第一個發布的工作草案。

流程 3:工作草案 WD(Working Draft)

工作團隊會依據 charter(章程) 發布一系列的工作草案(想看的可以到這邊 CSSWG charter),W3C 的會員和大眾可以提出評論和問題,並由工作團隊處理,一版接著一版的改進。

瀏覽器裡對於早期實驗性功能的支持最早通常是從這個階段開始。

流程 4:最終工作草案 LCWD(Last Call Working Draft)

工作團隊完成工作,要求大眾和 W3C 會員提出最後評論,並同樣由工作團隊處理回饋。如果情況不 OK,會再回到工作草案階段。

流程 5:候選推薦標準 CR(Candidate Recommendation)

當問題都解決,結束最終工作草案階段,將進入候選推薦標準階段。此時該規範已經有一個相對穩定的版本,可以展開測試,工作團隊會將實施所得到的回饋整合到規範中。如果狀況不 OK,同樣會再返回到工作草案階段。

流程 6:建議推薦標準 PR(Proposed Recommendation)

如果測試沒有意外,規範將進入建議推薦標準階段。W3C 創辦人(Tim Berners-Lee)會正式請求 W3C 會員審閱這份建議推薦標準。如果不 OK,同樣會再返回到工作草案階段或回到候選推薦標準。

流程 7:推薦標準 REC(Recommendation)

進入最終階段,審閱結果 OK,便由創辦人(Tim Berners-Lee)宣布該規範成為推薦標準,也就是成為 W3C 的標準。

遵照 W3C 規範有什麼優點?

  1. 提高網站排名
    如果寫出符合 W3C 標準的網站,網頁的結構化相對清楚,就容易被網頁爬蟲抓取內容,更易於被搜尋到。

  2. 瀏覽速度更快
    符合 W3C 標準,程式碼會相對較簡潔,瀏覽器當然會更快。

  3. 容易維護
    符合 W3C 標準,兼容各種主流瀏覽器,不會出現太過特別的寫法,網頁架構及樣式就更清楚,當然更容易修改維護。

  4. 無障礙網頁設計
    符合 W3C 標準,網頁內容能被更多的設備訪問(如螢幕閱讀器),這能夠被幫助如色盲、視弱等殘障人士瀏覽網頁。

W3C 規範查詢?

從規範之中能最完整的了解 CSS 特性,如果是想查看現在的規範,可以前往這個網站,填入你知道的屬性做搜尋。
https://www.w3.org/TR/

相信在查看的過程中會看到 Module 和 Level 這幾個名詞,這是什麼?

CSS 在發展的過程因為東西變的很多很雜,所以在 CSS2.1 之後引入了模組(Module)的概念,把功能模組化;然而由於這些 CSS 模組除了包含了以前的特性外,也陸續增加了新的特性,因此這些更新的模組都逐漸演變為 CSS3,也就是一系列 Level 3 模組的總稱。

至於 Level 1和 Level 2 呢?那些沒有出現在 CSS1 或 CSS2.1 中的新特性,將會以模組 Level 1 作為開頭。CSS Flexbox 和 Grid 都是以 Module Level 1 開始,如果有新的特性被 W3C 推薦,就有可能會進入下一個 Level(例如:CSS Grid Layout Module Level 1 已經進入 Level 2)。

支援度查詢?

如果是想查看瀏覽器有沒有支援,快速的方法是利用這個網站直接做查詢:Can I Use
不過論準確度的話,還是直接開瀏覽器查看比較準,手機的部分則可以參考:使用 PC 版 Chrome 來 Debug 手機版的 Chrome


資料來源:


上一篇
[Day01] 請問你掉的是 Flexbox 還是 Grid ?
下一篇
[Day03] 你可能不知道的切版歷史
系列文
重新認識 Flex 和 Grid30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言